import React, { Component,createContext } from 'react'

/*
  上下文后代传参：
    1. 创建一个上下文
    const TitleContext = createContext()
    2. 使用上下文对象中的 Provider 组件，配合 value 属性进行值的传递
    <TitleContext.Provider value='卫龙'>
      <First></First>
    </TitleContext.Provider>

    3. 类组件接收参数
      3.1 通过静态属性进行接收 static contextType = TitleContext
      3.2 通过组件名接收 First.contextType = TitleContext
    4. 使用数据 {this.context}


    3. 函数式组件接收参数
      <TitleContext.Consumer>
        {
          (value) => {
            // 4. 使用数据
            return (<h1> Section: {value} </h1>)
          }
        }
      </TitleContext.Consumer>
*/


// 1. 创建一个上下文
const TitleContext = createContext()

class First extends Component {
  // 3. 通过静态属性进行接收
  // static contextType = TitleContext

  render() {
    console.log(this);
    return (
      <div>
        {/* 4. 使用 this.context 拿到我的参数然后使用 */}
        First： {this.context.name}
        <Section />
      </div>
    )
  }
}

// 3. 接收参数
First.contextType = TitleContext

const Section = (props)=>{
  console.log(props);
  return (<>
    <div>
      {/* 3. 通过 TitleContext.Consumer 先接收数据 */}
      <TitleContext.Consumer>
        {
          (value) => {
            // 使用数据
            return (<h1> Section: {value.name} </h1>)
          }
        }
      </TitleContext.Consumer>
    </div>
  </>)
}


export default class App extends Component {
  render() {
    return (
      <div>
        {/* 2. 使用上下文对象中的 Provider 组件，配合 value 属性进行值的传递 */}
        <TitleContext.Provider value={{name: '张一', age: 18, sex: '女'}}>
          <First></First>
        </TitleContext.Provider>

      </div>
    )
  }
}
